<template>
<div class="main_box"  style="padding:10px">
  <div class="add_wrap">
    <div class="tit">
      <h2>{{dataForm.houseId?'编辑设备地址':'新增设备地址'}}</h2>
      <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
    </div>
    <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
      <el-row>
        <el-form-item label="地址类型" prop="houseType">
          <el-radio-group v-model="dataForm.houseType">
            <el-radio :label="1">
              住家
            </el-radio>
            <el-radio :label="2">
              办公
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所在地区" prop="streetIds">
          <Region
            :streetValues="dataForm.streetIds"
            @regionChange="handleItemChange"
          ></Region>
        </el-form-item>
        <el-form-item label="小区" prop="villageName">
          <el-select v-model="dataForm.villageId" clearable @change="handleVillageChange">
            <el-option v-for="item in villageList" :value="item.id" :label="item.name" :key="item.id">

            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="dataForm.address"  placeholder="请输入xx栋xx单元xx号"></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名" prop="linkName">
          <el-input v-model="dataForm.linkName"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" prop="linkPhone">
          <el-input v-model="dataForm.linkPhone"></el-input>
        </el-form-item>
        <el-form-item label="wifi名称" prop="wifiName">
          <el-input v-model="dataForm.wifiName" @keydown.native="keydown($event)"></el-input>
        </el-form-item>
        <el-form-item label="wifi密码" prop="wifiPwd">
          <el-input v-model="dataForm.wifiPwd" @keydown.native="keydown($event)"></el-input>
        </el-form-item>
         <el-form-item label="备 注 " prop="remark">
            <el-input type="textarea" v-model="dataForm.remark"></el-input>
          </el-form-item>
      </el-row>

      <el-row>
        <el-form-item>
          <el-button plain type="primary" @click="sureClick">保 存</el-button>
          <el-button plain @click="returnList">取 消</el-button>
        </el-form-item>
      </el-row>
    </el-form>

  </div>
 </div>
</template>

<script>
import * as message from "@/constants/message";
import Region from "@/components/Region";
import DeviceLocationApi from '@/api/address/deviceLocation';
import VillageApi from "@/api/address/village"
export default{
  data(){
      return {
        dataForm:{
          houseId:"",
          houseType:1,
          linkName:"",
          linkPhone:"",
          streetIds:[],
          provinceId: "",
          provinceName: "",
          cityId: "",
          cityName: "",
          areaId: "",
          areaName: "",
          streetId:'',
          streetName:'',
          villageId:"",
          villageName:"",
          address:"",
          wifiName: '',
          wifiPwd: '',
          remark:"",
        },
        villageList:[],
        loadingIns:false,
        roleRules: {
          streetIds: [
            { required: true, message: "请选择所在地区", trigger: "change" }
          ],
          address: [
            { required: true, message: "请输入详细地址", trigger: "blur" }
          ],
          houseType:[
            {required:true,message:"请选择地址类型",trigger:"blur"}
          ],
          linkName: [
            { required: true, message: "请输入联系人姓名", trigger: "blur" }
          ],
         /* wifiName: [
              { required: true, message: "请输入WIFI名称", trigger: "blur" }
          ],
          wifiPwd: [
              { required: true, message: "请输入WIFI密码", trigger: "blur" }
          ],*/
          villageName:[
            {required:true,message:"请选择小区",trigger:"change"}
          ],
          linkPhone: [
             { required: true, message: "请输入电话号码", trigger: "blur" },
            { pattern:/^1(3|4|5|6|7|8|9)\d{9}$/, message: "电话号码格式错误", trigger: "blur" }
          ],
        }
      }
  },
  components: {
    Region
  },
  mounted(){
    this.init()
  },
  methods: {
    init(){
      if (this.$route.query.id) {
        this.dataForm.houseId = this.$route.query.id
        this.getData()
      }

    },
    keydown(e) {
      if (e.keyCode == 32) {
        e.returnValue = false;
      }
    },
     getData () {
      DeviceLocationApi.getHouseInfo({
        id: this.dataForm.houseId
      }).then(res => {
        this.$Utils.bindingBean(this.dataForm, res.data)
        this.dataForm.villageId = res.data.villageId?Number(res.data.villageId):""
        this.dataForm.streetIds = [
          this.dataForm.provinceId,
          this.dataForm.cityId,
          this.dataForm.areaId,
          this.dataForm.streetId,
          this.dataForm.provinceName,
          this.dataForm.cityName,
          this.dataForm.areaName,
          this.dataForm.streetName
        ];

         let param = {
          provinceId:this.dataForm.streetIds[0],
          cityId:this.dataForm.streetIds[1],
          areaId:this.dataForm.streetIds[2],
          streetId:this.dataForm.streetIds[3],
          name:"",
        }
        VillageApi.villageList(param).then(res=>{
          this.villageList = res.data
        })
      })
    },
    handleItemChange(val) {
      this.villageList = []
      this.dataForm.villageId = ""
      this.dataForm.villageName = ""
      this.dataForm.provinceId = val.provinceId;
      this.dataForm.provinceName = val.provinceName;
      this.dataForm.cityId = val.cityId;
      this.dataForm.cityName = val.cityName;
      this.dataForm.areaId = val.areaId;
      this.dataForm.areaName = val.areaName;
      this.dataForm.streetId = val.streetId
      this.dataForm.streetName = val.streetName
      if(val.provinceId){
        this.dataForm.streetIds = [val.provinceId, val.cityId, val.areaId,val.streetId];
        let param = {
        provinceId:this.dataForm.streetIds[0],
        cityId:this.dataForm.streetIds[1],
        areaId:this.dataForm.streetIds[2],
        streetId:this.dataForm.streetIds[3],
        name:"",
        }
        VillageApi.villageList(param).then(res=>{
          this.villageList = res.data
        })
      }else{
        this.dataForm.streetIds = []
      }
    },
    // 小区的值改变
    handleVillageChange(val){
      if(val){
        this.dataForm.villageName = this.villageList.find(item=>val==item.id).name
      }else{
        this.dataForm.villageName = ""
      }

    },
    sureClick() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
            .then(() => {
              if (this.dataForm.houseId){
                this.editData();
              }else{
                this.addData();
              }
          });
        }
      })
    },
    addData() {
     let param = {
          houseType:this.dataForm.houseType,
          linkName:this.dataForm.linkName,
          linkPhone:this.dataForm.linkPhone,
          provinceId: this.dataForm.provinceId,
          provinceName:this.dataForm.provinceName,
          cityId: this.dataForm.cityId,
          cityName: this.dataForm.cityName,
          areaId:this.dataForm.areaId,
          areaName: this.dataForm.areaName,
          streetId:this.dataForm.streetId,
          streetName:this.dataForm.streetName,
          address:this.dataForm.address,
          villageId:this.dataForm.villageId,
          villageName:this.dataForm.villageName,
          wifiName:this.dataForm.wifiName,
          wifiPwd: this.dataForm.wifiPwd,
          remark:this.dataForm.remark,
      };
      DeviceLocationApi.addHouse(param).then(res=>{
        this.$Utils.notifySuccess()
          this.returnList();
      })
    },
    editData() {
      let param = {
          houseId:this.dataForm.houseId,
          houseType:this.dataForm.houseType,
          linkName:this.dataForm.linkName,
          linkPhone:this.dataForm.linkPhone,
          provinceId: this.dataForm.provinceId,
          provinceName:this.dataForm.provinceName,
          cityId: this.dataForm.cityId,
          cityName: this.dataForm.cityName,
          areaId:this.dataForm.areaId,
          areaName: this.dataForm.areaName,
          streetId:this.dataForm.streetId,
          streetName:this.dataForm.streetName,
          address:this.dataForm.address,
          villageId:this.dataForm.villageId,
          villageName:this.dataForm.villageName,
          wifiName:this.dataForm.wifiName,
          wifiPwd: this.dataForm.wifiPwd,
          remark:this.dataForm.remark,
      };
      DeviceLocationApi.editHouse(param)
        .then(data => {
          this.$Utils.notifySuccess()
          this.returnList();
        })
    },
    returnList(){
      this.$store.dispatch('delView', this.$route);
      this.$router.push({path: '/address/deviceLocationManagement'});
    }
  },

}
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
